import React, { Component } from 'react';
import { messages } from "share/common";
import {Button, Form, Checkbox, message, Switch, Icon, Popover, Alert, Spin} from "antd";
import Chooser from "components/chooser";
import auditCheckService from "../auto-check-receipt.service"
import "styles/finance-setting/auto-check-receipt/auto-check-receipt-setting.scss"

const FormItem = Form.Item;

@Form.create()
class AutoCheckReceiptDetail extends Component {

  state = {
    loading: false,
    enabled: this.props.record.receiptCheckConfigId ? this.props.record.enabled : true
  };

  fieldOptions = [
    {label: messages('common.invoice.type')/*发票类型*/, value: 'INVOICE_TYPE_NO', disabled: true},
    {label: messages('expense-14.key189')/*价税合计*/, value: 'FEE', disabled: true},
    {label: messages('expense-14.key187')/*开票日期*/, value: 'BILLING_TIME'},
    {label: messages('expense-14.key192')/*金额合计*/, value: 'FEE_WITHOUT_TAX'},
    {label: messages('common.currency')/*币种*/, value: 'VAT_INVOICE_CURRENCY_CODE'},
    {label: messages('expense-14.key188')/*税率*/, value: 'TAX_RATE'},
    {label: messages('common.tax')/*税额*/, value: 'TAX'},
  ];

  handleSave = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { record, configId } = this.props;
        values.receiptTypeList = values.receiptTypeList.map(item => item.value);
        values.receiptCheckConfigId = configId;
        record.id && (values.id = record.id);
        this.setState({ loading: true });
        auditCheckService.saveRule(values).then(() => {
          message.success(messages('common.save.success',{arg1: ''})/*{arg1} 保存成功*/);
          this.props.close(true);
        }).finally(() => {
          this.setState({ loading: false });
        })
      }
    })
  };

  render() {
    const { record, form: { getFieldDecorator } } = this.props;
    const { loading, enabled } = this.state;
    return (
      <div className="dim-match-setting-detail">
        <Form className="new-form">
          <Alert
            message={`${messages('common.info')/*提示*/}：${messages('expense-14.key481')/*模糊匹配时发票代码、发票号码不参与匹配。发票类型、价税合计必须参与匹配*/}`}
            style={{ marginBottom: 16 }}
            type="info"
            showIcon
          />
          <FormItem label={messages('common.column.status')/*状态*/}>
            {getFieldDecorator('enabled', {
              valuePropName: 'checked',
              initialValue: record.receiptCheckConfigId ? record.enabled : true
            })(
              <Switch onChange={enabled => this.setState({ enabled })}/>
            )}
            <span style={{ marginLeft: 10 }}>
              {enabled ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/}
            </span>
          </FormItem>
          <FormItem label={messages('common.invoice.type')/*发票类型*/}>
            {getFieldDecorator('receiptTypeList', {
              initialValue: record.receiptTypeShowValueList || []
            })(
              <Chooser
                placeholder={messages('expense-14.key482')/*通用*/}
                type="receipt_type_list"
                labelKey="messageKey"
                valueKey="value"
              />
            )}
          </FormItem>
          <FormItem label={messages('expense-14.key483')/*匹配字段*/}>
            {getFieldDecorator('checkFieldList', {
              initialValue: record.checkFieldList || ["INVOICE_TYPE_NO", "FEE"]
            })(
              <Checkbox.Group options={this.fieldOptions}/>
            )}
          </FormItem>
          <div className="slide-footer">
            <Button type="primary" loading={loading} onClick={this.handleSave}>{messages('common.save')/*保存*/}</Button>
            <Button onClick={() => this.props.close()}>{messages('common.cancel')/*取消*/}</Button>
          </div>
        </Form>
      </div>
    )
  }
}

export default AutoCheckReceiptDetail;
